<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="../include/tag.jsp" %>
<link rel="stylesheet" href="${ctx}/css/ui/activity/counterfoil.css">
<!-- 票据 -->
<div class="post_main_r">
    <div id="payitemDiv" class="onlyone">
        <div class="post_pay_item">
            <div class="post_pay_item_top">
                <span class="tit01">序号</span><span class="tit02">票据名称</span> <span class="tit03">金额</span>
                <span class="tit03">名额限制</span> <span class="tit03" style="flex: 0.5">操作</span>
            </div>
            <div class="cost_container">
                <c:if test="${fn:length(mallGoods.mallProductWithSpecList) == 0}">
                    <div class="cost_content cost_item">
                        <div class="form_input_number">1</div>
                        <input type="hidden" class="cost_sort" name="mallProductWithSpecList[0].sort"/>
                        <div class="form_input_cost form_input_cost_type">
                            <input type="text" placeholder="请输入票据名称" name="mallProductWithSpecList[0].value" class="input cost_name"
                                   value="">
                        </div>
                        <div class="form_input_cost form_input_cost_money">
                            <input type="text" placeholder="请输入金额" name="mallProductWithSpecList[0].price"
                                   class="input cost_payment" value="">
                        </div>
                        <div class="form_input_cost form_input_cost_money">
                            <input type="text" placeholder="请输入库存" name="mallProductWithSpecList[0].stock"
                                   class="input cost_limitNum" value="">
                        </div>
                        <div class="form_option">
                            <a title="删除" class="controlClear" href="javascript:void(0)" style="display: none;"></a>
                        </div>

                    </div>
                </c:if>
                <c:if test="${fn:length(mallGoods.mallProductWithSpecList) > 0}">
                    <c:forEach var="product" varStatus="status" items="${mallGoods.mallProductWithSpecList}">
                        <c:set var="hasBuy" value="${counterfoil.joinNum > 0 ? true : false}"/>
                        <div class="cost_content cost_item">
                            <div class="form_input_number">${status.count}</div>
                            <input type="hidden" class="cost_id" name="mallProductWithSpecList[${status.index}].id" value="${product.id}">
                            <input type="hidden" class="cost_delFlag" name="mallProductWithSpecList[${status.index}].delFlag" value="${product.delFlag}">
                            <input type="hidden" class="cost_sort" name="mallProductWithSpecList[${status.index}].sort" value="${product.sort}"/>
                            <div class="form_input_cost form_input_cost_type">
                                <input type="text" placeholder="请输入票据名称" name="mallProductWithSpecList[${status.index}].value" class="input cost_name" value="${product.value}">
                            </div>
                            <div class="form_input_cost form_input_cost_money">
                                <input type="text" placeholder="请输入金额" name="mallProductWithSpecList[${status.index}].price" class="input cost_payment" value="${product.price}"${hasBuy == true ? 'readonly="readonly"' : ''} >
                            </div>
                            <div class="form_input_cost form_input_cost_money">
                                <input type="text" placeholder="请输入库存" name="mallProductWithSpecList[${status.index}].stock" class="input cost_limitNum" value="${product.stock}">
                            </div>
                            <div class="form_option">
                                <c:if test="${hasBuy == false}">
                                    <a title="删除" class="controlClear" href="javascript:void(0)"></a>
                                </c:if>
                            </div>
                        </div>
                    </c:forEach>
                </c:if>
            </div>
        </div>
    </div>
    <div class="post_main_fee2 mt20">
        <a href="javascript:addItem()" class="layui-btn layui-btn-danger"> <i class="iconfont icon-add btn-icon"></i>
            添加费用项</a>
    </div>
</div>
<script type="text/javascript" charset="utf-8">
    var form = null;
    function addItem() {
        var length = $(".cost_container").find(".cost_content").length;
        var array = new Array();
        array.push('<div class="cost_content cost_item">');
        array.push('<input type="hidden" class="cost_sort" name="mallProductWithSpecList[' + (length) + '].sort" />');
        array.push('<div class="form_input_number">' + (length + 1) + '</div>');
        array.push('<div class="form_input_cost form_input_cost_type"><input type="text" name="mallProductWithSpecList[' + (length) + '].value" placeholder="请输入票据名称" class="input cost_name" value=""></div>');
        array.push('<div class="form_input_cost form_input_cost_money"><input type="text" name="mallProductWithSpecList[' + (length) + '].price" placeholder="请输入金额" class="input cost_payment" value=""></div>');
        array.push('<div class="form_input_cost form_input_cost_money"><input type="text" name="mallProductWithSpecList[' + (length) + '].stock" placeholder="请输入库存" class="input cost_limitNum" value=""></div>');
        array.push('<div class="form_option">');
        array.push('<a title="删除" class="controlClear"></a>');
        array.push('</div>');
        array.push('</div>');

        $(".cost_container").append(array.join(""));
        $(".cost_container").find(".cost_content").find(".controlClear").show();
        var display = $("#areaInput").css("display");
        if (util.isValid(display)) {
            if (display == "block") {
                $("#areaInput").siblings(".layui-form-select").hide();
            }
        }
    }

    // 1.名称不能重名
    // 2.金额只能为数字且小于等于0
    // 3.名额限制只能为数字且大于等于0
    function checkCost() {
        $(".cost_container").find("input").removeClass("error_bd_red");
        var _payNameArr = new Array();
        var flag = true;
        $(".cost_container").find(".cost_content").each(function (index, element) {
            var $cost = $(element);
            var cost_name = $cost.find(".cost_name").val();
            cost_name = cost_name.replace(/\'/g, '');
            cost_name = cost_name.replace(/\"/g, '');
            var cost_payment = $cost.find(".cost_payment").val();
            var cost_limitNum = $cost.find(".cost_limitNum").val();

            // 检查空
            if (!util.isValid(cost_name)) {
                $cost.find(".cost_name").addClass("error_bd_red");
                util.layerMsgError('请填写票据名称');
                flag = false;
                return flag;
            }

            if (!util.isValid(cost_payment)) {
                $cost.find(".cost_payment").addClass("error_bd_red");
                util.layerMsgError('请填写金额');
                flag = false;
                return flag;
            }

            if (!util.isValid(cost_limitNum)) {
                $cost.find(".cost_limitNum").addClass("error_bd_red");
                util.layerMsgError('请填写人数上限');
                flag = false;
                return flag;
            }

            // cost_name
            for (var m = 0; m < _payNameArr.length; m++) {
                if (_payNameArr[m] == cost_name) {
                    $cost.find(".cost_name").addClass("error_bd_red");
                    util.layerMsgError('票据名称不能重复');
                    flag = false;
                    return flag;
                }
            }
            _payNameArr.push(cost_name);

            // cost_payment
            var isError = false;
            var desc = "";
            var reg = /^(([0-9]|([1-9][0-9]{0,9}))((\.[0-9]{1,2})?))$/;
            if (isNaN(cost_payment) || !reg.test(cost_payment)) {
                desc = "费用格式不正确";
                isError = true;
            } else if (parseFloat(cost_payment) < 0) {
                desc = "费用必须大于等于0";
                isError = true;
            }
            if (isError) {
                $cost.find(".cost_payment").addClass("error_bd_red");
                util.layerMsgError(desc);
                flag = false;
                return flag;
            }

            // cost_limitNum
            isError = false;
            desc = "";
            if (!util.checkNumber(cost_limitNum)) {
                desc = "人数上限必须是数字";
                isError = true;
            } else if (parseInt(cost_limitNum) < 1) {
                desc = "人数上限必须大于0";
                isError = true;
            }

            if (isError) {
                $cost.find(".cost_limitNum").addClass("error_bd_red");
                util.layerMsgError(desc);
                flag = false;
                return flag;
            }
            flag = true;
            $cost.find("input").removeClass("error_bd_red");
        });
        return flag;
    }

    $(function () {
        layui.use(['form', 'laydate'], function () {
            form = layui.form, laydate = layui.laydate;
        });
        function hideDel() {
            var length = $(".cost_container").find(".cost_content").length;
            if (length == 1) {
                $(".cost_container").find(".cost_content").find(".controlClear").hide();
            }
        }

        hideDel();

        $('#payitemDiv').delegate('a,input', 'click', function (e) {
            var $target = $(e.target);
            if ($target.hasClass("control")) {
                var restrictControl = $target.closest(".cost_content").find(".restrictControl");
                var display = $(restrictControl).css("display");
                if (display == "none") {
                    $(restrictControl).show();
                } else {
                    $(restrictControl).hide();
                }
                e.stopPropagation();
            } else if ($target.hasClass("controlClear")) {
                // length = 1表示更新；length=表示新增
                var length = $target.closest(".cost_content").find(".cost_id").length;
                if (length == 0) {
                    $target.closest(".cost_content").remove();
                } else {
                    $target.closest(".cost_content").hide();
                    $target.closest(".cost_content").find(".cost_delFlag").val("1");
                    $target.closest(".cost_content").removeClass("cost_content");
                }
                // 重新编号
                $(".cost_container").find(".cost_content").each(function (index, element) {
                    var $cost = $(element);
                    $cost.find(".form_input_number").text(index + 1);
                });
                // 如果只有一种票了，则不能删除
                length = $(".cost_container").find(".cost_content").length;
                if (length == 1) {
                    $(".cost_container").find(".cost_content").find(".controlClear").hide();
                }
                e.stopPropagation();
            } else if ($target.hasClass("cost_payment")) {
                var readonly = $target.attr("readonly");
                if (util.isValid(readonly)) {
                    util.layerMsgError('已经有报名的收费项不能修改金额');
                }
                e.stopPropagation();
            }
        });
    })

    // 重置下标
    function resetIndex() {
        // 重新标索引
        $(".cost_container").find(".cost_item").each(function (index, element) {
            var $cost = $(element);

            var $costId = $cost.find(".cost_id");
            updateName($costId, index);

            var $costDelFlag = $cost.find(".cost_delFlag");
            updateName($costDelFlag, index);

            var $costSort = $cost.find(".cost_sort");
            $costSort.val(index + 1);
            updateName($costSort, index);

            $cost.find(".form_input_cost").each(function (i, ele) {
                var $input = $(ele).find("input");
                updateName($input, index);
            });
            var $select = $cost.find(".restrictControl").find("select");
            updateName($select, index);
        });

        // 重置下标
        function updateName(ele, index) {
            var name = $(ele).attr("name");
            if (util.isValid(name)) {
                var start = name.substring(0, name.indexOf("[") + 1);
                var end = name.substring(name.indexOf("]"), name.length);
                var newName = start + index + end;
                $(ele).attr("name", newName);
            }
        }
    }
</script>